<template>
  <div class="container-table">
    <el-table
      :data="staffList"
      style="width: 100%"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column fixed prop="staff_number" label="员工工号" width="100" />
      <el-table-column prop="staff_rfid" label="rfid卡号" width="100" />
      <el-table-column prop="staff_sex" label="性别" width="80">
        <template #default="scope">{{
          scope.row.staff_sex === '1' ? '男' : '女'
        }}</template>
      </el-table-column>
      <el-table-column prop="staff_age" label="年龄" width="80" />
      <el-table-column prop="staff_date" label="入职日期" width="100">
        <template #default="scope">
          <span v-if="scope.row.staff_date != null">
            <!-- {{ dayjs(scope.row.staff_date) }} -->
            {{ dayjs(scope.row.staff_date).format('YYYY-MM-DD') }}
            <!-- {{ parseTime(scope.row.staff_data, '{y}-{m}-{d}') }} -->
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="staff_phone" label="联系电话" width="120" />
      <el-table-column prop="staff_state" label="在职状态" width="80">
        <template #default="scope">{{
          scope.row.staff_state === '1'
            ? '在岗'
            : scope.row.staff_state === '2'
            ? '休息'
            : '离职'
        }}</template>
      </el-table-column>
      <el-table-column prop="staff_photo" label="照片" width="120">
        <!-- /supermarket_management_system/staffImg/6f400cf7-f437-41d5-ae97-68642ce555b1.jpg -->
        <!-- http://localhost:8888/common/download?name=3a34dab3-480d-48b7-9052-572d5f764c1b.jpg -->
        <template #default="scope">
          <el-image
            v-if="scope.row.staff_photo"
            style="width: 40px; height: 40px"
            :src="`/api/common/download?name=${scope.row.staff_photo}`"
          />
          <!-- :src="
              require('/supermarket_management_system/staffImg/' +
                scope.row.staff_photo) -->
        </template>
      </el-table-column>
      <el-table-column prop="staff_level" label="权限" width="80" />
      <el-table-column prop="staff_id" label="身份证号" />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="handleModify(scope.row)"
            >编辑</el-button
          >
          <el-button
            link
            type="danger"
            size="small"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="container-pagination">
    <el-pagination
      v-model:currentPage="pagination.currentPage"
      v-model:page-size="pagination.pageSize"
      :page-sizes="[1, 2, 3, 4, 5]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <StaffModify ref="staffModify"></StaffModify>
</template>

<script setup>
import { computed, getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import { reqUpdateStaff } from '@/api/staff'
// import { reqGetStaffList } from '@/api/staff'
import StaffModify from './StaffModify'
import dayjs from 'dayjs'
import { ElMessage, ElMessageBox } from 'element-plus'
// const data = reactive({})
// 使用store

const poxy = getCurrentInstance()
const store = useStore()
const { dispatch, commit, getters } = store

// 编辑按钮
const handleModify = (staff) => {
  commit('staff/SAVESTAFF', staff)
  poxy.refs.staffModify.changeDialogFormVisible()
}
// 删除按钮
const handleDelete = (staff) => {
  // 判断该员工是否是1号
  if (staff.staff_number === 1) {
    ElMessage({
      message: '该员工不可删除！',
      type: 'warning'
    })
  } else {
    // 确认删除
    ElMessageBox.confirm('确定删除该员工?', '提醒', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(async () => {
        // 删除员工
        const result = await reqUpdateStaff({
          staff_number: staff.staff_number,
          staff_status: 0
        })
        if (result.code === 200 && result.data === 1) {
          getStaffList()
          ElMessage({
            message: '删除成功！',
            type: 'success'
          })
        } else {
          ElMessage.error('删除失败！')
        }
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除'
        })
      })
  }
}
// 每页数量改变的方法
const handleSizeChange = (val) => {
  pagination.value.pageSize = val
  getStaffList()
}
// 页数改变的方法
const handleCurrentChange = (val) => {
  pagination.value.currentPage = val
  getStaffList()
}
// 获取列表
const getStaffList = () => {
  dispatch('staff/getStaffList', { pagination })
}
// gettes里的参数
const staffList = computed(() => getters.staffList)
const pagination = computed(() => getters.pagination)

getStaffList()
</script>

<style lang="scss" scoped></style>
